<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>家庭信息</title>
    <link rel="stylesheet" type="text/css" href="/gradesign/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/gradesign/css/sweetalert.css"/>
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <style type="text/css">
		.container{
			margin-top:1%;
		}
		body{
        background:transparent;
            line-height: 2.5;
   		}
   		.form-group{
   			margin-top:10px;
   		}
   		#content{border:1px solid #f4f4f4}
   		form{margin: 30px;}
   		.family-nick-name{display: block;font-size: 24px;color: #333;font-weight: normal;}
   		#icon-edit{display:none}
    </style>
</head>
<body>
<div class="container">
	<div id="content">
		<div class="row" th:each="family : ${family}">
				<div class="col-sm-3 form-group">
					<div class="family-icon col-sm-8" >
						<img id="icon" th:src="${family.iconurl}" width="170px" height="170px" onclick="iconEdit()"></img>
						<img id="icon-edit" src="/gradesign/img/timg.jpg" width="50px" height="50px" style="position:absolute;top:100px;left:100px" ></img>
					</div>
				</div>
				<div class="family-info col-sm-9 form-group" onclick="infoEdit()">
					<div class="family-nick-name">
						<span><span th:text="${family.familyname}"></span>&nbsp;&nbsp;&nbsp;&nbsp;<small th:text="${family.familyaccount}"></small></span>
					</div>
					<div class="family-email">
						<span>家庭邮箱：<span th:text="${family.familyemail}"></span></span>
					</div>
					<div class="family-created-time">
						<span>创建时间：<span th:text="${family.created_time}"></span></span>
					</div>
					<div class="family-sign">
						<span>家庭简介：<span th:text="${family.familyintro}"></span></span>
					</div>
				</div>
		</div>
	</div>
</div>
<div id="uploadModal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title">上传头像</h4>
			</div>
			<div class="modal-body">
				<input type="file" id="file" name="file"></input>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-default" onclick="subIcon()">Save</button>
			</div>
		</div>
	</div>
</div>
<div id="infoEditModal" class="modal fade" tabindex="-1" role="dialog">
	<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title">家庭信息修改</h4>
				</div>
				<div class="modal-body">
					<div class="form-inline" >
					<div class="row">
						<div class="col-sm-12 form-group">
							<label class="col-sm-3" for="familyaccount">家庭账号：</label>
							<div class="col-sm-7" >
								<input type="text" id="familyaccount" class="form-control" th:value="${family.familyaccount}" readonly="readonly"/>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12 form-group">
							<label class="col-sm-3" for="familyname">家庭名称：</label>
							<div class="col-sm-7" >
								<input type="text" id="familyname" class="form-control" th:value="${family.familyname}"/>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12 form-group">
							<label class="col-sm-3" for="familyemail">家庭邮箱：</label>
							<div class="col-sm-7" >
								<input type="text" id="familyemail" class="form-control" th:value="${family.familyemail}"/>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12 form-group">
							<label class="col-sm-3" for="created_time">创建时间：</label>
							<div class="col-sm-7" >
								<input type="text" id="created_time" class="form-control" th:value="${family.created_time}" readonly="readonly"/>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-12 form-group">
							<label class="col-sm-3" for="familyintro">家庭简介：</label>
							<div class="col-sm-7" >
								<textarea style="width: 400px;height: 100px;" type="text" id="familyintro" class="form-control" th:text="${family.familyintro}" />
							</div>
						</div>
					</div>
				</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-default" onclick="subInfo()">Save</button>
				</div>
			</div>
		</div>
	
</div>
</body>
<script type="text/javascript" src="/gradesign/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/gradesign/js/yongqi.js"></script>
<script type="text/javascript" src="/gradesign/js/sweetalert.min.js"></script>
<script type="text/javascript" src="/gradesign/js/bootstrap.min.js"></script>
<script type="text/javascript">
	function iconEdit(){
		$("#uploadModal").modal('show');
	};
	function infoEdit(){
		$("#infoEditModal").modal('show');
	}
/* 	$("#icon").mouseover(function(){
			$("#icon-edit").show();
	});
	$(".family-icon").mouseout(function(){
			$("#icon-edit").hide();
	}); */
	function subInfo(){
		var params = {};
		params.familyaccount = $("#familyaccount").val();
		params.familyname = $("#familyname").val();
		params.familyemail = $("#familyemail").val();
		params.familyintro = $("#familyintro").val();
		yongqi.allAjax("/gradesign/family/editInfo",params,function(){
			swal({
				title:"家庭信息修改成功！",
				showConfirmButton: false 
			})
			window.setTimeout("window.location.href='/gradesign/familyInfo'",1000);
		})
	}
	function subIcon(){
		var formData = new FormData();  
		formData.append('file',$("#file")[0].files[0]);
		debugger;
		$.ajax({
			type: "POST",
	        enctype: 'multipart/form-data',
			url : "/gradesign/family/editIcon",
			data : formData,
			processData: false,  
            contentType: false ,
			success : function(data){
				$("#uploadModal").modal('hide');
				swal({
					title:"家庭头像修改成功！各处图标待网站刷新后刷新。",
					showConfirmButton: false 
				})
				window.setTimeout("window.location.href='/gradesign/familyInfo'",1500);
			},
			error : function(){
				swal("系统错误请联系管理员！");
			}
		})
	};
	
</script>
</html>